<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="js/vue.global.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <div class="container" id="container">
        <div class="cart-container">
            <div class="container-main"><!---->
                <div class="cart-wrap">
                    <div class="cart-goods-list">
                        <div class="list-head clearfix">
                            <div class="col col-check">
                                <!-- <i class="iconfont" v-model="selectAll"
                                @click="toggleAll"></i>全选 -->
                               <div class="checkbox">
                                    <input type="checkbox" id="select-all" v-model="allSelected" @change="toggleAllSelected">
                                    <span class="custom-checkbox__indicator"></span>
                               </div>
                               <span>全选</span>    
                            </div>
                            <div class="col col-img">&nbsp;</div>
                            <div class="col col-name">商品名称</div>
                            <div class="col col-price">单价</div>
                            <div class="col col-num">数量</div>
                            <div class="col col-total">小计</div>
                            <div class="col col-action">操作</div>
                        </div>
                        <div class="list-body">
                            <div class="list-item" v-for="(item, index) in  cartItems" :key="index">
                                <div class="item-box">
                                    <div class="item-table">
                                        <div class="item-row clearfix">
                                            <div class="col col-check">
                                                <!-- <i class="iconfont" :id="`item-${index}`" v-model="item.selected"></i> -->
                                                <div class="checkbox">
                                                    <input type="checkbox" v-model="item.selected" @change="updateTotalPrice">
                                                    <span class="custom-checkbox__indicator"></span>
                                                </div>
                                            </div>
                                            <div class="col col-img">
                                                <a href="javascript:void(0)">
                                                    <img alt="" :src="item.imageSrc" width="80" height="80">
                                                </a>
                                            </div>
                                            <div class="col col-name">
                                                <h3 class="name">
                                                    <a href="javascript:void(0)">{{item.goodsName}}</a>
                                                </h3>
                                            </div>
                                            <div class="col col-price">{{item.price}}元</div>
                                            <div class="col col-num">
                                                <div class="change-goods-num clearfix">
                                                    <a href="javascript:;" @click="decrementQuantity(index)" :disabled="item.quantity <= 1">
                                                        <i class="iconfont icon-jian"></i>
                                                    </a>
                                                    <input type="text" autocomplete="off" class="goods-num" :value="item.quantity">
                                                    <a href="javascript:;" @click="incrementQuantity(index)">
                                                        <i class="iconfont icon-jiahao"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col col-total">{{item.price}}
                                            </div>
                                            <div class="col col-action"><a
                                                    href="javascript:void(0);" title="删除" class="del"><i
                                                     class="iconfont icon-chacha"></i></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="placeholder-div"></div>
                    <div class="cart-bar clearfix">
                        <div class="section-left"><a href="//www.mi.com"
                                class="back-shopping">继续购物</a><span class="cart-total"> 已选择<i
                                >{{ selectedItemCount }}</i> 件</span></div><!----><span
                            class="total-price">合计：<em>{{totalPrice}}</em>元<a
                                href="javascript:void(0);" class="btn btn-a btn-primary" @click="checkout">去结算</a></span>
                        <div class="no-select-tip" style="display: none;">请勾选需要结算的商品<i
                             class="arrow arrow-a"></i><i
                                class="arrow arrow-b"></i></div>
                    </div>
                </div>
            </div><!---->
        </div>
    </div>
</body>
<script src="js/app.js"></script>
</html>